import React, { useEffect } from "react";
import Plotly, { Layout } from 'plotly.js-dist-min'
import { Button } from "react-bootstrap";
import { ArrowUpRightSquare } from "react-bootstrap-icons";

interface ScatterGraphItemProps{
    xs?:Array<number>
    ys?:Array<number>
    name?:string
}

export class ScatterGraphItem implements ScatterGraphItemProps{
    xs?:Array<number> = [];
    ys?:Array<number> = [];
    name?:string = ""
    constructor(props:ScatterGraphItemProps){
        this.xs = props.xs;
        this.ys = props.ys;
        this.name = props.name;
    }
    build = ()=>{


        var temArr = this.xs?.map((x,index)=>{
            return {x,y:(this.ys?this.ys[index]:0)}
        }).sort((x1y1, x2y2)=>{
            return x1y1.x - x2y2.x
        })
        var xs = temArr?.map((xy)=>{
            return xy.x
        })

        var ys = temArr?.map((xy)=>{
            return xy.y
        })

        return {trace:{
            x:xs,
            y:ys,
            mode:"lines+markers",
            name:this.name||""
        }}
    }
}

interface CanvasSize extends Partial<Layout>{
}

interface ScatterPlotProps{
    data?:Array<ScatterGraphItem>;
    canvasSize?:CanvasSize
}

const ScatterPlot:React.FC<ScatterPlotProps> = (props:ScatterPlotProps) => {

    const data = props.data?.map((item:ScatterGraphItem)=>{
        return item.build().trace
    })||[]

    useEffect(()=>{

        props.data?.forEach((item:ScatterGraphItem)=>{
            Plotly.newPlot("drawContainer",data)
        })

    },[])

    const onPress = ()=> {
        window.open("/")
    }

    return (<div className="d-flex flex-column justify-content-center w-100">
        <Button className="align-self-end bg-secondary" onClick={onPress}><ArrowUpRightSquare/></Button>
        <div id="drawContainer" style={{width:"90vw"}}></div>
        <>Binding Data Source</>
        <></>
    </div>)


}


export default ScatterPlot